<template>
    <div id="TodoItem">
        <div id="todoDetails">
            <van-row justify="center" style="font-size: 12px;line-height: 50px;">
                <van-col id="addData" span="8"><el-button size="large" link type="primary" @click="showPopup()"><el-icon><Plus /></el-icon>添加</el-button></van-col>
                <van-col id="dataClear" span="8"><el-button size="large" link type="plain" @click="dataClear()">删除所有</el-button></van-col>
                <van-col id="noNotes" span="8">暂无待办事项</van-col>
                <van-col id="notes" span="8">已完成{{ notesOk }}/全部{{ props.plans.length }}</van-col>
                <van-col id="searchNotes" span="8" style="display: none;">已完成{{ props.k }}/全部{{ props.j }}</van-col>
                <van-col id="searchNoNotes" span="8" style="display: none;">没有相关任务</van-col>
            </van-row>
        </div>
        <div id="overlay">
			<div class="popup">
				<p class="popup_title">提示</p>
                <el-input class="popup_content" v-model.lazy="message" id="inputId" style="width: 200px;height: 35px;" placeholder="请输入你要添加的任务" />
				<div class="popup_btn">
                    <el-button class="cancelBtn" @click="hidePopup()" >取消</el-button>
                    <el-button class="confirmBtn" @click="save()" type="info">确认</el-button>
				</div>
			</div>
	  	</div>
    </div>
</template>

<script setup>
import { Plus } from "@element-plus/icons-vue";
    import { ref,onMounted,defineEmits,watch } from 'vue'

	const message = ref('')
	const emit = defineEmits(['someEvent','getData'])
    const notesOk= ref(0)

    const props = defineProps({
		plans: Array,
        j: Number,
        k: Number
	})
    watch(() => props.j, ( oldValue) => {
        if(oldValue==0){
            document.querySelector('#searchNoNotes').style.display = 'block' 
        }
        else{
            document.querySelector('#searchNotes').style.display = 'block'
        }
        document.querySelector('#notes').style.display = 'none'
    })
    onMounted(() => {
        // console.log(props.plans.length)
		let j = 0
        if(props.plans.length==0){
            document.querySelector('#notes').style.display = 'none'
            document.querySelector('#noNotes').style.display = 'block'
        }else{
            document.querySelector('#notes').style.display = 'block'
            document.querySelector('#noNotes').style.display = 'none'
        }
		for (let i = 0; i < props.plans.length; i++) {
            if (props.plans[i].state) {
                j++
            }
		}
		notesOk.value = j
	});

    function dataClear () {
		window.localStorage.clear(); //清除缓存
		location.reload()
	}
    function showPopup () {
		var overlay = document.getElementById("overlay");
		overlay.style.display = "block";
	}
    function hidePopup () {
		var overlay = document.getElementById("overlay");
		overlay.style.display = "none";
		document.getElementById("inputId").value = "";
	}
	function save () {
		var overlay = document.getElementById("overlay");
		overlay.style.display = "none";
		emit("someEvent",message.value)
		document.getElementById("inputId").value = "";
	}
</script>

<style scoped>
    #TodoItem{
        height: 10vh;
        width: 84%;
        margin-left: 8%;
        margin-top: 3vh;
    }
    #todoDetails{
        font-size: 16px;
        padding-left: 5%;
        width: 94%;
        height: 8vh;
        line-height: 3vh;
        background-color: rgba(255, 255, 255, 0.1);
    }
    #todoDetails p,#todoDetails h5{
        float: left;
        width: 32%;
    }
    /* #notes,#noNotes{
        font-size: 12px;
        line-height: 1vh;
    }
    #searchNotes,#searchNoNotes{
        font-size: 12px;
        line-height: 1vh;
        display: none;
    } */
    #overlay {
		position: fixed;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		font-size: 16px;
		background-color: rgba(0, 0, 0, 0.5);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
		display: none;
	}
	/* 弹出框主体 */
	.popup {
		background-color: #ffffff;
		max-width: 300px;
		min-width: 17%;
		height: 40vh;
		border-radius: 5px;
		margin: 100px auto;
		text-align: center;
	}
	/* 弹出框的标题 */
	.popup_title {
        font-size: 16px;
		height: 10vh;
		line-height: 10vh;
		border-bottom: solid 1px #cccccc;
	}
	/* 弹出框的内容 */
	.popup_content {
        font-size: 12px;
		height: 4vh;
		line-height: 4vh;
		text-align: center;
		margin-top: 4vh;
	}
	/* 弹出框的按钮栏 */
	.popup_btn {
		margin-top: 5vh;
	}
	/* 弹出框的按钮 */
	.popup_btn button {
        font-size: 12px;
		color: #778899;
		width: 40%;
		height: 7vh;
		cursor: pointer;
		border: solid 1px #cccccc;
		border-radius: 5px;
		margin: 1vh 1vh;
		color: #ffffff;
		background-color: #337ab7;
	}
</style>